<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册用户</title>
    <#include "common/header.ftl"/>
</head>
    <body class="hold-transition register-page">
    <div class="register-box">
        <div class="register-logo">
            <a href="#"><b>GISBlog</b>后台管理系统</a>
        </div>
        <div class="register-box-body">
            <p class="login-box-msg"><b id="msg">${error}</b></p>
            <form id="registerForm" action="/user/register" method="post">
                <div class="form-group has-feedback">
                    <input id="userName" name="username" type="text" class="form-control" placeholder="请输入用户名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input id="pwd1" type="password" class="form-control" placeholder="请输入密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input id="pwd2" name="password" type="password" class="form-control" placeholder="请再次输入密码">
                    <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                    </div>
                    <div class="col-xs-4">
                        <input  type="submit" class="btn btn-primary btn-block btn-flat" value="注册"/>
                    </div>
                </div>
            </form>
            <a href="/page/login" class="text-center">登陆系统</a>
        </div>
    </div>
    <#include "common/footer.ftl"/>
    <script>
        $(function () {
            var flag=false;
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%'
            });
            $("#registerForm").submit(function () {
                var pwd1=$("#pwd1").val()
                var pwd2=$("#pwd2").val()
                if(pwd1!=pwd2)
                {
                    $("#msg").text("两次输入的密码不一致！")
                    return false;
                }
                if(!flag)
                {
                    $("#msg").text("用户名不合法！")
                    return false;
                }
            })
            $("#userName").focus(function () {
                $("#msg").text("")
            })
            $("#userName").blur(function () {
                var name=$(this).val()
                if(name=="")
                {
                    flag=false;
                    $("#msg").text("用户名不可为空！")
                    return;
                }
                $.post("/user/exist",{
                    name:name
                }, function (result) {
                    if(result.msg=="不存在改用户")
                    {
                        flag=true;
                        $("#msg").text("用户名可使用")
                    }else
                    {
                        flag=false;
                        $("#msg").text("用户名已经存在")
                    }
                })
            })
        });
    </script>
    </body>
</html>